<template>
	<view class="progress-bao">
		<view class="progress-bar" :style="{ height: height, backgroundColor: dsColor }" v-if="textInside">
			<view class="progress" :style="{ width: progressWidth, backgroundColor: bgColor, borderRadius: borderRadius }">
			</view>
			<span class="percentage" v-if="showProcess"
				:style="{ color: color, fontSize: fontSize, backgroundColor: bgColor, left: progressWidth }">{{ percentage
				}}%</span>
			<span class="percentage" v-if="showValue"
				:style="{ color: color, fontSize: fontSize, backgroundColor: bgColor, left: progressWidth }">{{
					numberValue }}</span>
		</view>
		<view class="card-item" v-else>
			<view class="progress-bar1" :style="{ height: height, backgroundColor: dsColor }">
				<view class="progress1"
					:style="{ width: progressWidth, backgroundColor: bgColor, borderRadius: borderRadius }">
				</view>
			</view>
			<!-- <view class="percentage1" :style="{color:color,fontSize:fontSize }">{{ percentage }}%</view> -->
		</view>
	</view>
</template>

<script>
export default {
	props: {
		//文字是否内显
		textInside: {
			type: Boolean,
			default: true
		},
		//当前进度
		progress: {
			type: Number,
			required: true,
			validator: (value) => value >= 0 && value <= 100,
			default: 50
		},
		//文字颜色
		color: {
			type: String,
			default: '#FFFFFF'
		},
		//文字大小
		fontSize: {
			type: String,
			default: '24rpx'
		},
		//进度条颜色
		bgColor: {
			type: String,
			default: '#5cb85c'
		},
		//进度条底色颜色
		dsColor: {
			type: String,
			default: '#f2f2f2'
		},
		//进度条高度
		height: {
			type: String,
			default: '28rpx'
		},
		//进度条圆角弧度
		borderRadius: {
			type: String,
			default: '8rpx'
		},
		showProcess: {
			type: Boolean,
			default: false
		},
		showValue: {
			type: Boolean,
			default: false
		},
		numberValue: {
			type: Number,
			default: 50
		},
	},
	computed: {
		progressWidth() {
			return `${this.progress}%`
		},
		percentage() {
			return Math.round(this.progress)
		}
	}
};
</script>

<style scoped>
.progress-bao {
	width: 100%;
	height: 100rpx;
	box-sizing: border-box;
}

.progress-bar {
	position: relative;
	width: 100%;
	background-color: #EAE6E6;
	border-radius: 16rpx;
	height: 100rpx;
}

.percentage {
	position: absolute;
	top: calc(50% + 50rpx);
	/* left: 50%; */
	color: #666;
	transform: translate(-50%, -50%);
	font-size: 24rpx;
	user-select: none;
	z-index: 1;
	height: 42rpx;
	line-height: 42rpx;
	border-radius: 21rpx;
	box-sizing: border-box;
	padding: 0 24rpx;
	display: flex;
	justify-content: center;
	align-items: center;
}

.progress {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
}

.card-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.progress-bar1 {
	position: relative;
	width: 100%;
	background-color: #f2f2f2;
	border-radius: 16rpx;
}

.percentage1 {
	color: #666;
	font-size: 24rpx;
}

.progress1 {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
}
</style>
